<template>
    <div>
        <!-- <h3>当前最新的count值为：{{$store.state.count}}</h3> -->
        <h3>{{$store.getters.showNum}}</h3>
        <button @click="addCount">+1</button>
        <button @click="addCount2">+N</button>
        <button @click="addCount3">+1 Async</button>
        <button @click="addCount4">+N Async</button>
    </div>
</template>
<script>

export default {
  data () {
    return {
      
    }
  },
  methods:{
    /**
     * commit 访问store 中mutation方法
     * 
     */
    addCount()
    {
      this.$store.commit('add');
    },
     /**
     * commit 调用store 中某个mutation方法
     * 携带参数
     */
    addCount2()
    {
      this.$store.commit('addN',3);
    },
    addCount3()
    {
      //dispatch 调用Actions 中的函数，异步
      this.$store.dispatch("addAsync")
    },
    addCount4()
    {
      this.$store.dispatch("addNAsync",5)
    }
  }


}
</script>
<style>
</style>
